<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音程听感训练器</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script>
</head>
<body>
    <div class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
            <div class="container">
                <a class="navbar-brand" href="#">🎵 音程听感训练器</a>
                <button class="btn btn-outline-light btn-sm" id="helpBtn" data-bs-toggle="modal" data-bs-target="#helpModal">
                    帮助
                </button>
            </div>
        </nav>

        <div class="container">
            <!-- 主要功能选择卡片 -->
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-header">
                            <ul class="nav nav-tabs card-header-tabs" id="mainTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="piano-tab" data-bs-toggle="tab" data-bs-target="#piano" type="button" role="tab">
                                        虚拟钢琴
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="single-interval-tab" data-bs-toggle="tab" data-bs-target="#single-interval" type="button" role="tab">
                                        单音程播放
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="all-intervals-tab" data-bs-toggle="tab" data-bs-target="#all-intervals" type="button" role="tab">
                                        全音程播放
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="practice-multi-tab" data-bs-toggle="tab" data-bs-target="#practice-multi" type="button" role="tab">
                                        音程练习
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content" id="mainTabContent">
                                <!-- 虚拟钢琴面板 -->
                                <div class="tab-pane fade show active" id="piano" role="tabpanel">
                                    <div class="piano-container">
                                        <h5 class="text-center mb-4">🎹 虚拟钢琴键盘</h5>
                                        <p class="text-center text-muted mb-4">点击钢琴键听音高，營造音乐环境与音程感知</p>
                                        
                                        <!-- 钢琴键盘区域 -->
                                        <div class="piano-keyboard" id="pianoKeyboard">
                                            <!-- 钢琴键将通过JS生成 -->
                                        </div>
                                        
                                        <!-- 播放控制 -->
                                        <div class="piano-controls mt-4">
                                            <div class="row align-items-center">
                                                <div class="col-md-8">
                                                    <div class="row g-3 mb-3">
                                                        <!-- 第一行：音量、基准组、速度 -->
                                                        <div class="col-md-4 col-6">
                                                            <label for="pianoVolume" class="form-label" style="font-size: 0.85rem;">音量: <span id="volumeValue">70</span>%</label>
                                                            <input type="range" class="form-range" min="0" max="100" value="70" id="pianoVolume">
                                                        </div>
                                                        <div class="col-md-4 col-6">
                                                            <label for="pianoOctave" class="form-label" style="font-size: 0.85rem;">基准组: <span id="octaveValue">4</span></label>
                                                            <input type="range" class="form-range" min="2" max="6" value="4" id="pianoOctave">
                                                        </div>
                                                        <div class="col-md-4 col-12">
                                                            <label for="pianoTempo" class="form-label" style="font-size: 0.85rem;">速度: <span id="pianoTempoValue">120</span></label>
                                                            <input type="range" class="form-range" min="60" max="200" value="120" id="pianoTempo">
                                                        </div>
                                                    </div>
                                                    <div class="row g-3">
                                                        <!-- 第二行：方向、固定根音 -->
                                                        <div class="col-md-3 col-6">
                                                            <label class="form-label" style="font-size: 0.85rem;">方向</label>
                                                            <select class="form-select form-select-sm" id="pianoDirection">
                                                                <option value="ascending">上行</option>
                                                                <option value="descending">下行</option>
                                                                <option value="random">随机</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-6 col-6">
                                                            <div class="form-check" style="margin-top: 2rem;">
                                                                <input class="form-check-input" type="checkbox" id="pianoFixedRoot">
                                                                <label class="form-check-label" for="pianoFixedRoot" style="font-size: 0.85rem;">
                                                                    固定根音
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <!-- 占位列，保持布局平衡 -->
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4 text-end">
                                                    <button class="btn btn-outline-primary btn-lg" id="playDemoScale">
                                                        🎵 播放示范音阶
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 当前播放信息 -->
                                        <div class="current-note-info mt-3" id="currentNoteInfo">
                                            <div class="alert alert-info text-center">
                                                <strong>当前音符：</strong><span id="currentNoteName">点击钢琴键或播放音程</span>
                                                <strong class="ms-3">频率：</strong><span id="currentNoteFreq"></span><span id="freqUnit"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 单音程播放面板 -->
                                <div class="tab-pane fade" id="single-interval" role="tabpanel">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h5>音阶选择</h5>
                                            <select class="form-select mb-3" id="scaleSelect">
                                                <option value="C">C大调</option>
                                                <option value="G">G大调</option>
                                                <option value="D">D大调</option>
                                                <option value="A">A大调</option>
                                                <option value="E">E大调</option>
                                                <option value="B">B大调</option>
                                                <option value="F#">F#大调</option>
                                                <option value="Db">Db大调</option>
                                                <option value="Ab">Ab大调</option>
                                                <option value="Eb">Eb大调</option>
                                                <option value="Bb">Bb大调</option>
                                                <option value="F">F大调</option>
                                                <option value="Am">A小调</option>
                                                <option value="Em">E小调</option>
                                                <option value="Bm">B小调</option>
                                                <option value="F#m">F#小调</option>
                                                <option value="C#m">C#小调</option>
                                                <option value="G#m">G#小调</option>
                                                <option value="D#m">D#小调</option>
                                                <option value="Bbm">Bb小调</option>
                                                <option value="Fm">F小调</option>
                                                <option value="Cm">C小调</option>
                                                <option value="Gm">G小调</option>
                                                <option value="Dm">D小调</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <h5>播放设置</h5>
                                            <div class="mb-2">
                                                <label class="form-label">播放方向</label>
                                                <select class="form-select" id="directionSelect">
                                                    <option value="ascending">上行音程</option>
                                                    <option value="descending">下行音程</option>
                                                    <option value="random">随机方向</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="fixedRoot">
                                                <label class="form-check-label" for="fixedRoot">
                                                    固定根音（从主音开始）
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="hideAnswer">
                                                <label class="form-check-label" for="hideAnswer">
                                                    播放前隐藏答案
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <label for="tempoSlider" class="form-label">播放速度: <span id="tempoValue">120</span> BPM</label>
                                                <input type="range" class="form-range" min="60" max="200" value="120" id="tempoSlider">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex gap-2 mt-3">
                                        <button class="btn btn-primary" id="playScaleIntervals">播放音程</button>
                                        <button class="btn btn-secondary" id="stopPlaying">停止</button>
                                    </div>
                                    <div class="mt-3" id="currentInterval">
                                        <div class="alert alert-info" style="display: none;">
                                            <strong>当前音程：</strong><span id="intervalName"></span> (<span id="intervalNotes"></span>)
                                        </div>
                                    </div>
                                </div>

                                <!-- 全音程播放面板 -->
                                <div class="tab-pane fade" id="all-intervals" role="tabpanel">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h5>筛选器</h5>
                                            <div class="mb-3">
                                                <label class="form-label">音程类型筛选</label>
                                                <select class="form-select" id="intervalFilter">
                                                    <option value="all">所有音程</option>
                                                    <option value="consonant">协和音程</option>
                                                    <option value="dissonant">不协和音程</option>
                                                    <option value="perfect">纯音程</option>
                                                    <option value="major">大音程</option>
                                                    <option value="minor">小音程</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <h5>播放设置</h5>
                                            <div class="mb-2">
                                                <label class="form-label">播放方向</label>
                                                <select class="form-select" id="allIntervalsDirection">
                                                    <option value="ascending">上行音程</option>
                                                    <option value="descending">下行音程</option>
                                                    <option value="random">随机方向</option>
                                                </select>
                                            </div>
                                            <div class="mb-2">
                                                <label for="allIntervalsTempo" class="form-label">播放速度: <span id="allTempoValue">100</span> BPM</label>
                                                <input type="range" class="form-range" min="60" max="200" value="100" id="allIntervalsTempo">
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="randomOrder">
                                                <label class="form-check-label" for="randomOrder">
                                                    随机顺序播放
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex gap-2 mt-3">
                                        <button class="btn btn-primary" id="playAllIntervals">播放全部</button>
                                        <button class="btn btn-warning" id="pauseAllIntervals">暂停</button>
                                        <button class="btn btn-secondary" id="stopAllIntervals">停止</button>
                                    </div>
                                    <div class="mt-3" id="allIntervalsProgress">
                                        <div class="progress" style="display: none;">
                                            <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                                        </div>
                                        <p class="mt-2" id="progressText"></p>
                                    </div>
                                </div>

                                <!-- 音程练习面板 -->
                                <div class="tab-pane fade" id="practice-multi" role="tabpanel">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h5>音阶选择</h5>
                                            <div class="scales-selection mb-3" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
                                                <!-- 音阶复选框将通过JS生成 -->
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">练习模式</label>
                                                <select class="form-select" id="practiceMode">
                                                    <option value="endless">无限模式</option>
                                                    <option value="timed">计时模式 (3分钟)</option>
                                                    <option value="fixed">固定题量 (20题)</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <h5>练习统计</h5>
                                            <div class="stats-card">
                                                <div class="row text-center">
                                                    <div class="col-3">
                                                        <div class="stat-item">
                                                            <div class="stat-value text-success" id="multiCorrectCount">0</div>
                                                            <div class="stat-label">正确</div>
                                                        </div>
                                                    </div>
                                                    <div class="col-3">
                                                        <div class="stat-item">
                                                            <div class="stat-value text-danger" id="multiWrongCount">0</div>
                                                            <div class="stat-label">错误</div>
                                                        </div>
                                                    </div>
                                                    <div class="col-3">
                                                        <div class="stat-item">
                                                            <div class="stat-value text-info" id="multiAccuracyRate">0%</div>
                                                            <div class="stat-label">正确率</div>
                                                        </div>
                                                    </div>
                                                    <div class="col-3">
                                                        <div class="stat-item">
                                                            <div class="stat-value text-warning" id="multiCurrentStreak">0</div>
                                                            <div class="stat-label">连对</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3" id="practiceTimer" style="display: none;">
                                                <div class="text-center">
                                                    <h4>⏱️ <span id="timeRemaining">3:00</span></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="practice-area mt-4" id="multiPracticeArea" style="display: none;">
                                        <div class="text-center mb-3">
                                            <button class="btn btn-lg btn-success" id="playMultiPracticeInterval">🔊 播放音程</button>
                                            <p class="mt-2"><small>当前音阶：<span id="currentScaleInfo"></span></small></p>
                                        </div>
                                        <div class="question-area">
                                            <h5 class="text-center mb-3">请选择你听到的音程：</h5>
                                            <div class="row" id="multiIntervalButtons">
                                                <!-- 音程选择按钮将通过JS生成 -->
                                            </div>
                                        </div>
                                        <div class="result-area mt-3" id="multiPracticeResult" style="display: none;">
                                            <!-- 结果显示区域 -->
                                        </div>
                                    </div>
                                    <div class="d-flex gap-2 mt-3">
                                        <button class="btn btn-primary" id="startMultiPractice">开始练习</button>
                                        <button class="btn btn-secondary" id="resetMultiStats">重置统计</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 帮助模态框 -->
    <div class="modal fade" id="helpModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">🎵 音程听感训练帮助</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <h6>什么是音程？</h6>
                    <p>音程是指两个音之间的距离关系。通过训练音程听感，可以培养相对音感和音高记忆能力。</p>
                    
                    <h6>常见音程类型：</h6>
                    <ul>
                        <li><strong>纯音程：</strong>纯一度、纯四度、纯五度、纯八度</li>
                        <li><strong>大音程：</strong>大二度、大三度、大六度、大七度</li>
                        <li><strong>小音程：</strong>小二度、小三度、小六度、小七度</li>
                        <li><strong>协和音程：</strong>听起来稳定和谐（纯音程、大小三六度）</li>
                        <li><strong>不协和音程：</strong>听起来紧张需要解决（大小二七度）</li>
                    </ul>

                    <h6>如何使用：</h6>
                    <ol>
                        <li><strong>单音阶播放：</strong>选择音阶和播放设置，听完整的音程序列</li>
                        <li><strong>全音程播放：</strong>播放所有音阶的音程组合，可筛选类型</li>
                        <li><strong>单音阶练习：</strong>在指定音阶内进行音程识别练习</li>
                        <li><strong>多音阶练习：</strong>在多个音阶间随机练习，提高综合能力</li>
                    </ol>

                    <h6>练习建议：</h6>
                    <ul>
                        <li>从熟悉的C大调开始练习</li>
                        <li>先掌握协和音程，再练习不协和音程</li>
                        <li>可以先固定根音，再练习任意音程组合</li>
                        <li>保持每日练习，循序渐进提高</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>